<template>
  <el-date-picker
    v-bind="controlProps"
    :model-value="modelValue"
    v-on="pureListeners"
    @update:modelValue="inputHandle"
  />
</template>

<script setup>
import { Clock } from "@element-plus/icons-vue";
import { usePureListenersAndAttr } from "@/utils";
import { strToDate } from "../utils";
const { pureAttrs: attrs, pureListeners } = usePureListenersAndAttr();
const { modelValue } = defineProps(["modelValue"]);
const emits = defineEmits(["update:modelValue"]);
const controlProps = computed(() => ({
  style: { width: "100%" },
  prefixIcon: Clock,
  clearable: true,
  ...(attrs.type && attrs.type.indexOf("range") !== -1
    ? {
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        defaultTime: [strToDate("00:00:00"), strToDate("23:59:59")],
      }
    : { valueFormat: "YYYY-MM-DD", defaultTime: new Date() }),
  ...attrs,
}));
const inputHandle = (value) => {
  if (!pureListeners?.["update:modelValue"]) {
    emits("update:modelValue", value);
  }
};
</script>
